<template>
  <el-card style="padding: 0">
    <!-- <div class="table_title">{{title}}</div> -->
    <div :id="eId" style="width: 100%; height: 285px;"></div>
  </el-card>
</template>

<script>
    var echarts = require('echarts/lib/echarts')
    // 引入柱状图
    require('echarts/lib/chart/line')
    require('echarts/lib/chart/bar')
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/toolbox')
    require('echarts/lib/component/title')
    require('echarts/lib/component/markpoint')
    require('echarts/lib/component/markline')

    export default {
      name: 'LineBar',
      props: ['title', 'eId', 'colorArr', 'xAxisData', 'chartData'],
      created() {
      },
      data() {
        return {
          formModel: {}
        }
      },
      watch: {
        chartData: {
          deep: true,
          handler(val) {
            this.setOptions(val)
          }
        }
      },
      mounted() {
        this.initCharts()
        window.addEventListener('resize', () => {
          this.chart.resize()
        })
      },
      methods: {
        initCharts() {
          this.chart = echarts.init(document.getElementById(this.eId))
          this.setOptions(this.chartData)
        },
        setOptions() {
          var colorRgb = 'rgba(' + this.colorArr
          console.log('colorRgb' + colorRgb)
          this.chart.setOption({
            // color: ['rgba(228,128,128,1)'], /* color表示折线图的颜色  */
            color: [colorRgb + ')'],
            title: {
              text: this.title
            },
            tooltip: {
              trigger: 'axis' /* 增加这个可以出现一条竖线显示信息  */
            },
            toolbox: {
              show: true,
              feature: {
                // dataZoom: {
                //   yAxisIndex: 'none'
                // },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
              }
            },
            xAxis: {
              name: '时间', /* x轴名称 */
              data: this.xAxisData, /* x轴显示数据*/
              type: 'category',
              boundaryGap: false, /* 两边留白策略*/
              axisPointer: {
                label: {
                  formatter: function(params) {
                    return params.value + '月份'
                  }
                }
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: this.title,
              type: 'line',
              data: this.chartData,
              areaStyle: {
                normal: {
                  // areaStyle: {
                  //   type: 'default'
                  // },
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: colorRgb + ',0.9)'
                    }, {
                      offset: 0.65, color: colorRgb + ',0.6)' // 50%处的颜色
                    }, {
                      offset: 1, color: colorRgb + ',0)'
                    }
                    ],
                    global: false // 缺省为 false
                  }
                }
              },
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' }
                ]
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }]
          })
        }

      }
    }

</script>

<style scoped>

</style>
